import React,{ useMemo } from 'react'
import { NavLink,Redirect } from 'react-router-dom'
import "./index.css"
export default function Footer(props) {
  //筛选符合条件的元素展示在 底部导航栏
  let isNaN = useMemo(()=>{
      return props.routes.filter(item => item.isNaN )
  },[])
  return (
    <div className='footer'>
      <ul>
        {
       isNaN.map(item => {
            return <NavLink key={item.id} to={item.path} activeClassName="active">
                <span className={item.icon}></span>
                <p>{item.title}</p>
              </NavLink>
          })
        }
        <Redirect from='/layout' to="/layout/home"></Redirect>
      </ul>
    </div>
  )
}
